<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.validatebox</title>
<link rel="stylesheet" type="text/css" href="../themes/default/tooltip.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/validatebox.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<style>
input {
	height: 20px;
	border: 1px solid #95bbe7;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
</style>
<script type="text/javascript" src="../jquery-1.10.2.js">
</script>
<script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js">
</script>
<script type="text/javascript" src="../src/jquery.parser.js">
</script>
<script type="text/javascript" src="../src/jquery.tooltip.js">
</script>
<script type="text/javascript" src="../src/jquery.validatebox.js">
</script>
<script type="text/javascript" src="../src/jquery.datebox.js">
</script>
</head>
<body>
<input id="dd" name="" type="text" class="xui-datebox" data-options="required:true"/>

<input id="dd1" name="" type="text" class="xui-datebox" data-options="required:true,datePickerOptions:{onpicked:function(){$dp.$('dd2').focus();},maxDate:'#F{$dp.$D(\'dd2\')}'}"/>
<input id="dd2" name="" type="text" class="xui-datebox" data-options="required:true,datePickerOptions:{minDate:'#F{$dp.$D(\'dd1\')}'}"/>
<br>
<script type="text/javascript">

$(function(){
	$('.xui-datebox').datebox({
	}).blur(function() {
		$(this).validatebox('validate');
	});
});

</script>
</body>
</html>
